<template>
    <el-dialog
            title="角色管理"
            :visible.sync="show"
            @opened="getRoleInfo"
            width="35%"
            top="10vh"
            :close-on-click-modal="closeOnClickModal"
            @close="hiddenReset"
            :before-close="hiddenReset">
        <div class="dialog-wrapper" v-loading="saveLoading">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
                <el-form-item label="角色名称" prop="name">
                    <el-input
                            v-model.trim="form.name"
                            show-word-limit
                            maxlength="255"
                            placeholder="请输入角色名称">
                    </el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="remark">
                    <el-input
                            type="textarea"
                            maxlength="255"
                            show-word-limit
                            v-model.trim="form.remark"
                            placeholder="请输入角色描述">
                    </el-input>
                </el-form-item>
                <el-form-item label="角色权限">
                    <div class="tree-container" style="height: 350px;overflow: auto">
                        <el-tree
                                :data="menu"
                                show-checkbox
                                node-key="id"
                                ref="tree"
                                highlight-current
                                :props="defaultProps">
                        </el-tree>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div class="buttonWrapper">
            <a class="cancelButton" @click="hiddenReset">取 消</a>
            <a class="confirmButton" @click="insertAndUpdate">确 定</a>
        </div>
    </el-dialog>
</template>

<script>
    import { dialog } from '@/common/mixin'
    import DataSelect from '@/components/select/DataSelect'
    export default {
        name: "role-manage-dialog",
        props: ['currentId', 'copyFlag'],
        mixins: [dialog],
        components: { DataSelect },
        data() {
            return {
                form: {
                    name: '',
                    remark: '',
                },
                defaultProps: {
                    children: 'menuList',
                    label: 'name'
                },
                menu: [],
                saveLoading: false,
                historyList: []
            }
        },
        computed: {
            rules() {
                return {
                    name: [{
                        required: true,
                        message: '角色名称不能为空',
                        trigger: ['blur']
                    }],
                }
            }
        },
        methods: {
            insertAndUpdate() {
                this.$refs.form.validate(async (valid) => {
                    if( valid ){
                        if(this.currentId) {
                            await this.$post(this.$api.systemSettings.roleManage.modify, {
                                ...this.form,
                                id: this.currentId,
                                allPickMenuIds: this.$refs.tree.getCheckedKeys().join(','),
                                halfPickMenuIds: this.$refs.tree.getHalfCheckedKeys().join(',')
                            });
                            this.$alert('修改成功').then(() => {
                                this.hidden();
                                this.$emit('success');
                            })
                        } else {
                            await this.$post(this.$api.systemSettings.roleManage.add, {
                                ...this.form,
                                allPickMenuIds: this.$refs.tree.getCheckedKeys().join(','),
                                halfPickMenuIds: this.$refs.tree.getHalfCheckedKeys().join(',')
                            });
                            this.$alert('保存成功').then(() => {
                                this.hidden();
                                this.$emit('success');
                            })
                        }
                    }
                })
            },
            async getRoleInfo() {
                // this.$refs.form.resetFields();
                this.saveLoading = true;
                this.$refs.tree.setCheckedKeys([]);
                this.menu = await this.$get(this.$api.systemSettings.menuManage.list);

                if( this.currentId ) {
                    let data = await this.$get(this.$api.systemSettings.roleManage.getInfoById, {
                        id: this.currentId
                    });

                    this.$utils.leftCopy(this.form, {...data});
                    let menuIdList = data.allPickMenuIds && data.allPickMenuIds.split(',').map(item => parseInt(item)) || []
                    console.log(menuIdList)
                    if( menuIdList.length > 0 ) {
                        this.$refs.tree.setCheckedKeys(menuIdList)
                    } else {
                        this.$refs.tree.setCheckedKeys([])
                    }
                }
                this.saveLoading = false;

            }
        }
    }
</script>

<style scoped>

</style>



